<template>
   <div class="tip">
       <mt-header fixed title="图片详情页">
            <router-link to="/photo/photoList" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <!--图片详情页开始-->
        <div v-for="(x,index) in list" :key="index" class="container">
            <h1 v-text="x.title"></h1>
            <span>{{x.add_time | datefmate("YYYY-MM-DD hh:mm:ss")}}</span>
            <span>{{x.click}}次浏览</span>
            <p class="p"></p>
            <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index) in imgList" :key="index">
                        <img v-preview="item.src" :src="item.src"> <!--可以简写成:src-->
                    </li>
		        </ul> 
            </div>
            <p v-html="x.content" class="text"></p>
        </div>
        <!--讨论区域-->
        <talkquar :val="value"></talkquar>
   </div>
</template>

<script>
    import apidoma from "../../kits/common.js"; //导入图片域名地址。
    import talkquar from "../subcom/component.vue"; //导入评论组件。
    export default {
        components:{ //注册子组件
            talkquar: talkquar //前边是自定义名称，后边是子组件的名称，如果一样时可以使用es6语法直接简写成talkquar即可
        },
        data(){
            return {
                value: "", //用来存放从路由传过来的id
                list: [], //用来存放页面头部和顶部内容信息
                imgList: [] //用来存放页面中部缩略图信息。
            }
        },
        created(){
            this.value = this.$route.params.val;
            this.getData();
            this.getImg();
        },
        methods: {
            //获取标题内容的请求
            getData(){
                //先确定url地址。
                const url = apidoma.picdoName + "/api/getimageInfo/" + this.value;
                this.$http.get(url).then(function(response){
                    this.list = response.body.message;
                })
            },
            //获取页面中部缩略图的请求
            getImg(){
                //先确定url地址
                const url = apidoma.picdoName + "/api/getthumimages/" + this.value;
                this.$http.get(url).then(function(response){
                    this.imgList = response.body.message;
                });
            }
        }
    }
</script>

<style scoped>
    .container {
        padding: 5px;
    }
    h1 {
        font-size: 16px;
        color: #0d87e3;
    }
    span {
        color: rgba(0,0,0,0.3);
        font-size: 14px;
        margin: 5px 0;
        display: inline-block;
    }
    .p {
        height: 1px;
        border-bottom: 1px solid rgba(0,0,0,0.5);
        width: 100%;
    }
    /*九宫格样式*/
    .mui-grid-view.mui-grid-9 {
        background-color: #000;
        border: 0;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border: 0;
    }
    .mui-content img {
        height: 95px;
    }
    /*清除九宫格上部间距页面顶部*/
    .mui-content > .mui-table-view:first-child {
        margin-top: 0;
    }
    .text {
        margin-top: 30px;
        color: #097bd0;
        font-weight: 700;
    }
</style>
